import React from 'react';
import { connect } from 'dva';
import { TableC } from '../../../../comps';
import colorArr from '../../../../css/colors';
import bugImg from '../../../../assets/commom/buy.png';
import sellImg from '../../../../assets/commom/sell.png';
class ProductDetailContent extends React.Component {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    //资产类型字典
    const {
      dispatch,
      globalM: {
        dataDictionary: { OPERATE_TYPE_DICT = [] },
      },
    } = this.props;
    dispatch({
      type: 'capitalDetailsM/save',
      payload: {
        typeData: OPERATE_TYPE_DICT,
      },
    });
  }
  // 业务类型前加图标
  chengeStyle = (text) => {
    const {
      capitalDetailsM: { typeData },
    } = this.props;
    let code = '';
    let test = '';
    if (typeData && typeData.length) {
      typeData.map((item) => {
        if (text == item.code) {
          (code = item.pid), (test = item.value);
        }
      });
    }
    return (
      <div>
        <img src={code == '0' ? bugImg : sellImg} />
        <span style={{ marginLeft: '10px' }}>{test}</span>
      </div>
    );
  };
  // 改变发生金额的颜色
  redAndGreen = (text, record) => {
    const {
      capitalDetailsM: { typeData },
    } = this.props;
    const textColor = colorArr.debtAndProfit.multFundText;
    let code = '';
    if (typeData && typeData.length) {
      typeData.map((item) => {
        if (record.operateType == item.code) {
          code = item.pid;
        }
      });
    }
    const tet = Number(text)
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    const colors = code == '1' ? textColor[0] : textColor[1];
    return <span style={{ color: `${colors}` }}>{tet}</span>;
  };
  //处理千分位
  changeRender = (text) => {
    const test = Number(text)
      .toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
    return test;
  };
  // 处理表格样式展示
  changeColumns = (columns) => {
    let data = columns;
    if (data && data.length) {
      data.map((item) => {
        if (item.key == 'handleDate') {
          // 交易时间排序
          item.sorter = false;
          item.width = 180;
          item.render = (text, record) => {
            return text !== null ? text : record.dataDt;
          };
        }
        if (item.key == 'combName') {
          // 产品名称转为代码-简称
          item.width = 170;
          item.render = (text, record) => {
            return record.rootId + '-' + record.rootName;
          };
        }
        if (item.key == 'weight') {
          // 组合名称转为代码-简称
          item.width = 175;
          item.render = (text, record) => {
            return record.combCode + '-' + record.combName;
          };
        }
        if (item.key == 'tradingCode') {
          // 证券代码转为代码-简称
          item.width = 140;
          item.render = (text, record) => {
            return record.tradingName ? record.tradingCode + '-' + record.tradingName : record.tradingCode || '--';
          };
        }
        if (item.key == 'operateType') {
          item.width = 140;
          item.render = (text, record) => {
            return this.chengeStyle(text);
          };
        }
        if (item.key == 'balance') {
          item.align = 'right';
          item.width = 200;
          item.render = (text, record) => {
            return text !== null ? this.redAndGreen(text, record) : '--';
          };
        }
        if (item.key == 'balancepre' || item.key == 'balanceafter') {
          item.width = 200;
          (item.align = 'right'), (item.type = 'money');
          item.width = item.render = (text) => {
            return text !== null ? this.changeRender(text) : '--';
          };
        }
        if (item.key == 'currency') {
          item.width = 60;
        }
        if (item.key == 'amount') {
          item.width = 140;
          (item.align = 'right'), (item.type = 'number');
        }
      });
    }
    return data;
  };
  render() {
    const {
      capitalDetailsM: { tableData },
      loading,
    } = this.props;
    const dataSource = tableData.data.dataSource;
    const columns = this.changeColumns(tableData.data.columns);
    const pageInfo = tableData.data.pageInfo;
    return (
      <div>
        <TableC
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          onChange={this.tableChange}
          current={pageInfo.currentPage}
          total={pageInfo.total}
          pageSize={pageInfo.numInPage}
          hidePage={true}
          rowKey='key'
          scroll={{ x: 1700, y: 500 }}
        />
      </div>
    );
  }
}
export default connect(({ capitalDetailsM, globalM, loading }) => ({ capitalDetailsM, globalM, loading: loading.effects['capitalDetailsM/getSearch'] }))(ProductDetailContent);
